<template>
  <div class="cmscomen platState">
    <div class="infoTable" :style="{ paddingLeft: paddingWidth + 'px'}">
      <div class="topMenu">
        <span>信息流数据管理</span>
        <span style="padding:0 4px;">/</span>
        <span class="two">账号数据</span>
      </div>
      <div class="formInfo">
        <el-date-picker
          v-model="dateValue"
          type="year"
          placeholder="选择年"
          @change="dateChange">
        </el-date-picker>
        <el-select v-model="value" placeholder="请选择月份" clearable :disabled="params.year==''">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="accountBtn">
        <el-row>
          <el-button type="primary">导出数据</el-button>
        </el-row>
      </div>
      <div class="accountWra">
        <div class="AccounTop"></div>
        <div class="AccountableWar gxw-con">
            <el-table
                v-loading="loading"
                element-loading-text="拼命加载中"
                :data="tableData"
                border
                stripe
                style="width: 100%"
            >
                <el-table-column
                    v-for="(c, i) in table_column"
                    :key="i"
                    :fixed="c.fixed"
                    :sortable="c.sortable"
                    :prop="c.prop"
                    :label="c.label"
                    :formatter="c.format"
                    width=""
                    min-width="100"
                    v-if="c.visible">
                </el-table-column>
            </el-table>
        </div>
        <!-- <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="4000">
          </el-pagination>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name:'accountData',
  data() {
      return {
          visibleMenuSelectStatus: false,
          loading: false,
          checkAll: true,
          checkedCities: ['月份', '团队', '姓名', '月目标', '月消耗', '月完成度', '季度目标', '季度完成度', '日均目标'],
          cities: ['月份', '团队', '姓名', '月目标', '月消耗', '月完成度', '季度目标', '季度完成度', '日均目标'],
          citiesFilterVal:['date','team','name','monthTarget','monthConsume','monthCompletion','quarterTarget','quarterCompletion','everydayTarget'],
          table_column: [
              {fixed: false, prop: 'date', label: '月份', sortable: false, visible: true},
              {fixed: false, prop: 'team', label: '团队', sortable: false, visible: true},
              {fixed: false, prop: 'name', label: '姓名', sortable: false, visible: true},
              {fixed: false, prop: 'monthTarget', label: '月目标', sortable: false, visible: true},
              {fixed: false, prop: 'monthConsume', label: '月消耗', sortable: false, visible: true},
              {fixed: false, prop: 'monthCompletion', label: '月完成度', sortable: false, visible: true},
              {fixed: false, prop: 'quarterTarget', label: '季度目标', sortable: false, visible: true},
              {fixed: false, prop: 'quarterCompletion', label: '季度完成度', sortable: false, visible: true},
              {fixed: false, prop: 'everydayTarget', label: '日均目标', sortable: false, visible: true},
          ],
          dateValue: '',
          command: '',
          page: {
              sizes: [100, 500],
              offset: 1,
              limit: 100,
              count: 0,
              currentPage: 1,
          },
          menu_nav: ['信息流绩效管理', '人员绩效管理'
          ],
          params: {
              year: '',
              month: '',
              date:''
          },
          tableData: [],
          isFirstEnter: false, // 是否第一次进入，默认false
          options: [
              {
                  value: '1',
                  label: '1月份'
              }, {
                  value: '2',
                  label: '2月份'
              }, {
                  value: '3',
                  label: '3月份'
              }, {
                  value: '4',
                  label: '4月份'
              },
              {
                  value: '5',
                  label: '5月份'
              },
              {
                  value: '6',
                  label: '6月份'
              },
              {
                  value: '7',
                  label: '7月份'
              },
              {
                  value: '8',
                  label: '8月份'
              },
              {
                  value: '9',
                  label: '9月份'
              },
              {
                  value: '10',
                  label: '10月份'
              },
              {
                  value: '11',
                  label: '11月份'
              },
              {
                  value: '12',
                  label: '12月份'
              },
          ],
          value: ''
      };
  },
  computed:{
    paddingWidth(){
      return this.$store.state.paddingWidth;
    }
  },
  created(){
    this.$nextTick(function(){
      console.log(document.querySelector('.el-table__header-wrapper'))
    })
  },
  methods: {
      pageInfo(){
          console.log(this.value);
          this.$http({
              method:'get',
              url:this.apiUrl.fdpApiAppraisalPersonal,
              params:{year:this.params.year,month:this.value==''?0:this.value}
          }).then(res=>{
              if(res.status==200){
                  console.log(res);
                  this.tableData = res.data.list;
              }
          }).catch();
      },
      handleCurrentChange(val) {
          this.page.offset = val;
          this.pageInfo();
      },
      handleSizeChange(val) {
          this.page.limit = val;
          this.pageInfo();
      },
      checkedChange(val) {
          for (let item of this.table_column) {
              var index = val.indexOf(item.label);
              index >= 0 ? item.visible = true : item.visible = false;
          }
      },
      changeCheckStatus(e) {
          e.stopPropagation();
          this.visibleMenuSelectStatus = !this.visibleMenuSelectStatus;
      },
      bodyEvent() {
          this.visibleMenuSelectStatus = false;
      },
      preventDefault(e) {
          e.stopPropagation();
      },
      dateChange() {
          if (this.dateValue != '' && typeof this.dateValue != 'undefined' && this.dateValue != null) {
              this.params.year =  this.dateValue.getFullYear();
          } else {
              this.params.year ='';
          }
      },
      /*导出*/
      importData () {
          if (this.tableData.length == 0) {
              this.$message({
                  type: 'info',
                  message: '请查询数据'
              });
              return false;
          }
          let tHeader = this.cities;
          let filterVal = this.citiesFilterVal;
          let importData = this.tableData;
          let fileName = [this.params.year,this.value,'详细数据'].join('_');
          this.handleDownload(tHeader, filterVal, importData, fileName);
      },
  }
}
</script>
<style>
.platState .infoTable{
  width: 100%;
}
</style>

